<script lang="ts" setup>
import { ref } from 'vue';
import emitter from '@/utils/emitter';
import type { courseForm } from "@/api/type"
import { useCourseStore } from '@/stores/course';

const course = ref(useCourseStore().courseInfo);
// 关闭抽屉
const drawer = ref(false);
const closeDrawer = () => {
    drawer.value = !drawer.value;
    // 刷新页面
    window.location.reload();
}
</script>
<template>
    <div class="course_main">
        <template v-for="(item) in course" :Key=item.cid>
            <el-card class="course_card"
                @click="emitter.emit('change-route', { routeName: 'mainCourse', cid: item.cid })">
                <template #header>{{ item.courseName }}</template>
                <el-image style="width: 100%; height: 250px" :src="item.courseImg" fit="cover">
                </el-image>
                <!-- <img :src="item.courseImg ? item.courseImg : defaultImage" style="width: 100%;"> -->
            </el-card>
        </template>

        <el-card class="course_card" @click="drawer = true">

            <template #header>
                创建新的课程班级
            </template>
            <el-icon style="width: 100%;height: 238px;" size="50">
                <Plus />
            </el-icon>
            <!-- 占位符元素 -->
        </el-card>
        <!-- 抽屉输入 -->
        <el-drawer v-model="drawer" size="500px">
            <template #header>
                <h4> 创建一个课程</h4>
            </template>
            <!-- 抽屉里面的，东西太多丢另一个文件了 -->
            <TheDrawer :closeDrawer="closeDrawer"></TheDrawer>
        </el-drawer>
    </div>
</template>

<style scoped>
.course_main {
    display: flex;
    /* background: yellowgreen; */
    height: auto;
    margin: 20px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.course_card {
    width: 280px;
    height: 340px;
    margin-bottom: 20px;
    margin-left: 20px;
}
</style>
